<template>
  <!-- 右侧的组件面板 -->
  <div class="component-card">
    <div>
      <Input v-model="searchVal" placeholder="输入组件名" @input="search" clearable>
        <span slot="prepend">搜索组件</span>
      </Input>
    </div>
    <div class="components-list iview-ui" @dragstart="dragStart" v-if="uiList.iViewUI && uiList.iViewUI.length">
      <Menu
        style="width: 100%"
        theme="light"
        v-for="(item, index) in uiList.iViewUI"
        :key="index"
        active-name="1-1"
        :open-names="['1']"
      >
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-paper" />
            {{ item.nameZh }}
          </template>
          <MenuItem
            name="1-1"
            v-for="(item1, index1) in item.list"
            :key="index1"
            draggable="true"
            :data-name="item1.dataName"
            class="conponent-row"
          >
            {{ item1.name }}
            <Icon
              @mouseenter.native="enterComponent(item.nameEn, item1.tag)"
              type="ios-help-circle"
              class="tips-icon"
              size="20"
            />
          </MenuItem>
        </Submenu>
      </Menu>
    </div>
    <div v-else class="tips">没有搜素到匹配的组件</div>
    <!-- 弹窗展示组件预览图 -->
    <component
      class="components-hover"
      :is="hoverComponent.tag"
      :show-icon="hoverComponent.showIcon"
      :type="hoverComponent.type"
      :size="hoverComponent.size"
      :placeholder="hoverComponent.placeholder"
      :style="hoverComponent.style"
      :value="hoverComponent.value"
      :max="hoverComponent.max"
      :min="hoverComponent.min"
    >
      {{ hoverComponent.describe }}
    </component>

    <!-- <Modal v-model="showModal" :title="hoverComponent.name" :footer-hide="true">
      <div>
        <component
          class="components-hover"
          :is="hoverComponent.tag"
          :show-icon="hoverComponent.showIcon"
          :type="hoverComponent.type"
          :size="hoverComponent.size"
          :placeholder="hoverComponent.placeholder"
          :style="hoverComponent.style"
          :value="hoverComponent.value"
          :max="hoverComponent.max"
          :min="hoverComponent.min"
        >
          {{ hoverComponent.describe }}
        </component>
      </div>
    </Modal> -->
  </div>
</template>
<script>
import { deepCopy } from '@/utils/help.js'
import museUiList from './list/muse-ui'
import mintUiList from './list/mint-ui'
import iViewUiList from './list/iview-ui' //我们引入的是二次封装的组件，iview的全局组件是不用引入的，直接用
export default {
  name: 'components',
  components: {
    ...museUiList,
    ...mintUiList,
    ...iViewUiList,
  },
  computed: {
    // 改变选择的ui库需要在vuex中存储起来
    activeUI: {
      get() {
        return this.$store.state.activeUI
      },
      set(val) {
        this.$store.commit('setState', {
          activeUI: val,
        })
      },
    },
  },
  data() {
    return {
      searchVal: '', //搜索值
      showModal: false, //组件弹窗
      uiList: {
        iViewUI: [
          {
            nameZh: '布局', //分类的名字
            nameEn: 'layout', //分类的名字
            list: [
              {
                name: '栅格布局', //展示内容
                dataName: 'Row', //匹配的默认显示的文字组件的标签dataName，即iview的组件标签
                tag: 'iviewRow', //匹配是引入的封装后的组件名，悬浮时展示
              },
              // {
              //   name: '行', //展示内容
              //   dataName: 'Row',
              //   tag: 'Row', //组件标签名,或者引入的组件名
              // },
              {
                name: '列',
                dataName: 'Col',
                tag: 'Col',
              },
            ],
          },
          {
            nameZh: '导航',
            nameEn: 'navigation',
            list: [
              {
                name: 'Page ',
                dataName: 'Page',
                tag: 'iviewPage',
              },
            ],
          },
          {
            nameZh: '表单',
            nameEn: 'form',
            list: [
              {
                name: '输入框',
                dataName: 'Input',
                tag: 'iviewInput',
              },
              {
                name: '数字输入框',
                dataName: 'InputNumber',
                tag: 'iviewInputNumber',
                max: 10,
                min: 1,
                value: 50,
              },
              {
                name: '按钮',
                dataName: 'Button',
                tag: 'iviewButton',
                describe: 'Button',
              },
              {
                name: '表单',
                dataName: 'Form',
                tag: 'iviewForm',
                value: 5,
              },
            ],
          },
          {
            nameZh: '图片',
            nameEn: 'img',
            list: [
              {
                name: 'Icon',
                dataName: 'Icon',
                tag: 'iviewIcon',
                size: 28,
              },
            ],
          },

          // {
          //   dataName: 'Alert', // data-name属性
          //   tag: 'Alert', //组件标签名,或者引入的组件名
          //   fixed: true, //是否固定在列表顶部
          //   showIcon: true, //展示图标
          //   describe: 'Alert', //展示内容
          //   type: 'happy-outline', //图标名称
          //   size: 28, //尺寸
          //   name: 'Alert', //直接写在li下的内容
          //   placeholder: '...', //占位
          //   style: 'width: 75%', //行内样式
          //   value: 50, //进度条长度
          // },

          // {
          //   dataName: 'ButtonGroup',
          //   tag: 'iviewButtonGroup',
          // },

          // {
          //   dataName: 'Input',
          //   tag: 'Input',
          //   placeholder: 'input',
          // },
          // {
          //   dataName: 'Radio',
          //   tag: 'Radio',
          //   describe: 'Radio',
          // },
          // {
          //   dataName: 'RadioGroup',
          //   tag: 'iviewRadioGroup',
          // },
          // {
          //   dataName: 'Checkbox',
          //   tag: 'Checkbox',
          //   describe: 'Checkbox',
          // },
          // {
          //   dataName: 'iSwitch',
          //   tag: 'i-switch',
          // },
          // {
          //   dataName: 'Select',
          //   tag: 'iviewSelect',
          // },
          // {
          //   dataName: 'Slider',
          //   tag: 'Slider',
          //   name: 'Slider',
          //   style: 'width: 75%; display: inline-block; vertical-align: middle',
          //   value: 50,
          // },
          // {
          //   dataName: 'DatePicker',
          //   tag: 'DatePicker ',
          //   placeholder: 'Date Picker',
          //   type: 'date',
          //   style: 'width: 200px',
          // },
          // {
          //   dataName: 'TimePicker',
          //   tag: 'TimePicker',
          //   placeholder: 'Time Pickerr',
          //   type: 'time',
          //   size: 'large',
          // },
          // {
          //   dataName: 'InputNumber',
          //   tag: 'Input-number',
          //   name: 'Input-number',
          //   max: 10,
          //   min: 1,
          //   value: 50,
          // },
          // {
          //   dataName: 'Rate',
          //   tag: 'Rate',
          //   value: 5,
          // },
          // {
          //   dataName: 'Form',
          //   tag: 'iviewForm',
          //   value: 5,
          // },
          // {
          //   dataName: 'ColorPicker',
          //   tag: 'ColorPicker',
          //   value: '#19be6b',
          // },
          // {
          //   dataName: 'Card',
          //   tag: 'iviewCard',
          // },
          // {
          //   dataName: 'Alert', // data-name属性
          //   tag: 'Alert', //组件标签名
          //   describe: 'Alert', //组件内容
          //   showIcon: true, //展示图标
          // },
        ],
      },
      initList: [],
      hoverComponent: {}, //悬浮的组件
    }
  },

  mounted() {
    this.initList = deepCopy(this.uiList.iViewUI)
  },
  methods: {
    // 搜索组件
    search() {
      this.uiList.iViewUI = deepCopy(
        this.initList.filter(
          // 模糊匹配
          (item) => item.tag.toLocaleUpperCase().includes(this.searchVal.toLocaleUpperCase())
        )
      )
    },
    chooseUl(val) {
      this.activeUI = val
    },
    // 开始拖拽组件
    dragStart(e) {
      let componentName = e.target.getAttribute('data-name')
      
      let info = {
        name: componentName,
        ui: this.activeUI,
        open: false, // 组件树是否展开
      }
      //通过e.dataTransfer方法来存储被拖拽组件的信息，这样在ondrop的时候可以获取这个组件
      e.dataTransfer.setData('info', JSON.stringify(info))
    },
    // 悬浮组件
    enterComponent(nameEn, tag) {
      this.showModal = true
      // 找到大类
      let firStList = this.uiList.iViewUI.filter((item) => item.nameEn === nameEn)[0].list
      // 根据标签找到小类
      this.hoverComponent = firStList.filter((item) => item.tag === tag)[0]
      this.$EventBus.$emit('getExampleComponent',this.hoverComponent)
    },
  },
}
</script>
<style lang="less" scoped>
.component-card {
  padding: 10px;
  .components-list {
    padding-top: 20px;
    /deep/.ivu-menu-item {
      width: 50%;
      display: inline-block;
    }

    .components-hover {
      position: absolute;
      left: 0;
      top: 0;
      background: #ddd;
      color: #fff;
    }
  }
}

.components-list * {
  cursor: move !important;
}

.tips {
  padding-top: 20px;
  text-align: center;
  color: #666;
}
.tips-icon {
  position: absolute;
  right: 5px;
  color: #666;
  z-index: 1000;
}
</style>
